<template>
	<!-- 弹窗 -->
	<cube-popup type="my-popup" v-model="visible">
		<div class="dialog-popup flex-column ">
			<img class="image" src="@/pics/page_header1.png" />
			
			<div class="message">{{content}}</div>
			<div class="btns-bottom">
				<div class="" v-if="btnCancelText.length>0">
					<div class="btn-cancel" @click="onCancel" >{{btnCancelText}}</div>
					
				</div>
				<div class="">
					<div class="btn-confirm" @click="onConfirm">{{btnConfirmText}}</div>
					
				</div>
				</div>
		</div>
	</cube-popup>	
</template> 

<script>
export default {
	name:"DialogConfirmCancel",
	data(){
		return {
			
		}
	},
	props:{
		visible:{
			type:Boolean,
			default:false,
		},		
		content:{
			type:String,
			default:"是否删除",
		},
		btnConfirmText:{
			type:String,
			default:"确定",
		},
		onConfirm:{
			type:Function,
		},
		btnCancelText:{
			type:String,
			default:"取消",
		},
		onCancel:{
			type:Function,
		}
	},
	
};
</script>

<style lang="less" ,sscoped>
.dialog-popup {
	height: 300px;
	width: 240px	;
	display: flex;
	flex-direction: column;
	align-items: center;
	background: #FFFFFF;
	opacity: 1;
	border-radius: 6px;	
	
	.image{
		width: 100%	;	
	}
	.message {
		margin-top: 10px ;
		font-size: 22px;
		font-weight: 500;
		color: #FFB651;
		line-height: 31px;
		text-align: center;
	}
	.btns-bottom{
		margin: 30px 0 0 0;
		display: flex;
		flex-direction: row;
		justify-content: space-evenly;
		align-items: center;
		
		width:100%;
		.btn-confirm{			
			width: 80px;		
			font-size: 16px;
			letter-spacing: 2px !important;			
			// margin-left: 20px;
		}
		.btn-cancel{			
			width: 80px;	
			font-size: 16px;
			background: #B0B0B0;
			box-shadow: 0px 5px 12px 0px rgba(176,176,176,0.59);
			letter-spacing: 2px !important;
		}
	}	
}
</style>
